<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    windowWidth: {{ width }}
    <br/>
    windowHeight: {{ height }}
  </div>
</body>
<script>
  /**
   * vue实现一个 useWindowSize 的hook, 监听浏览器窗口变化，返回其宽高
  */
  const { ref, onMounted, onUnmounted, createApp } = Vue;

  function useWindowSize() {
    const width = ref(window.innerWidth);
    const height = ref(window.innerHeight);
    
    const handleResize = () => {
      width.value = window.innerWidth;
      height.value = window.innerHeight;
    };
    
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });
    
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
    
    return { width, height };
  }

  createApp({
    setup() {
      const { width, height } = useWindowSize()
      return { width, height }
    }
  }).mount('#app')

</script>
</html>
